<script setup>
import {reqCategoryFilterAPI, reqSubCategoryAPI} from '@/api/category'
import GoodsIndex from '@/components/goods/GoodsIndex.vue'
import {ref, onMounted} from 'vue'
import {useRoute} from 'vue-router'

const route = useRoute()
onMounted(() => {
  // 获取分类数据
  getCategoryData()
  // 获取商品列表
  getAllGoods()
})

// 获取商品列表
const goodsList = ref([])
const getAllGoods = async () => {
  const res = await reqSubCategoryAPI(reqData.value)
  goodsList.value = res.data.result.items
}

// 获取分类数据
const categoryData = ref([])
const allGoodsList = ref([])
const getCategoryData = async () => {
  const res = await reqCategoryFilterAPI(route.params.id)
  categoryData.value = res.data.result  // 大的分类数据
  allGoodsList.value = res.data.result.goods // 所有详细的商品列表数据
}

// 切换tab
const tabChange = () => {
  console.log('tab切换了', reqData.value.sortField)
  reqData.value.page = 1
  getAllGoods()
}

// 请求参数
const reqData = ref({
  categoryId: route.params.id,
  page: 1,
  pageSize: 20,
  sortField: 'publishTime'
})
</script>


<template>
  <div class="sub-index">
    <!-- 面包屑 -->
    <div class="breadcrumb">
      <el-breadcrumb separator=">">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: `/category/${categoryData.parentId}` }">{{ categoryData.parentName }}</el-breadcrumb-item>
        <el-breadcrumb-item>{{ categoryData.name }}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 商品列表 -->
    <div class="product-list">
      <el-tabs v-model="reqData.sortField" @tab-change="tabChange" style="padding: 10px;font-size: 18px;">
        <!-- tab切换 -->
        <el-tab-pane label="最新商品" name="publishTime"></el-tab-pane>
        <el-tab-pane label="最高人气" name="orderNum"></el-tab-pane>
        <el-tab-pane label="最多评论" name="evaluateNum"></el-tab-pane>
      </el-tabs>
      <div class="product-list-content">
        <GoodsIndex v-for="goods in allGoodsList" :key="goods.id" :goods="goods"/>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.sub-index {
  display: flex;
  flex-direction: column;
  max-width: 1240px;
  margin: 0 auto;
  background-color: #ffffff;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

  .breadcrumb {
    height: 50px;
    display: flex;
    align-items: center;
    padding: 0 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    background-color: #ffffff;
  }

  .product-list {
    display: flex;
    flex-direction: column;

    .product-list-content {
      display: flex;
      flex-wrap: wrap;
      padding: 10px;
      background-color: #ffffff;
    }
  }
}

</style>